<%--
  Created by IntelliJ IDEA.
  User: 甲乙饼叮叮
  Date: 2019/10/4
  Time: 15:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="Shortcut Icon" href="../imgs/Kat-icon.png">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link type="text/css" href="../css/personal.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/alert.css">
</head>

<body>
<!-- 导航开始 -->
<%@ include file="../nav/nav.jsp"%>
<!-- 导航结束 -->
    <!-- 个人中心视图 -->
    <a name="per"></a>
    <div class="personal">
        <div class="container">
            <div class="row">
                <div class="col-xs-2 col-sm-2 col-md-2" id="left">
                    <div class="title">
                        <span>个人中心</span>
                    </div>
                    <div id="outer">

                        <!-- <div class="container-fluid"> -->
                        <ul id="tab" class="nav navbar-nav">
                            <li><a href="${pageContext.request.contextPath}/personal/user" class="glyphicon glyphicon-user">&nbsp;<span>我的信息</span></a>
                            </li>
                            <li><a href="${pageContext.request.contextPath}/personal/order"
                                   class="glyphicon glyphicon-list-alt">&nbsp;<span>挂号订单</span></a></li>
                            <li><a href="${pageContext.request.contextPath}/personal/record"
                                   class="glyphicon glyphicon-calendar">&nbsp;<span>就诊记录</span></a></li>
                            <li><a href="${pageContext.request.contextPath}/personal/medical"
                                   class="glyphicon glyphicon-tasks">&nbsp;<span>我的病历</span></a>
                            </li>
                            <li class="active"><span class="glyphicon glyphicon-phone">&nbsp;账号安全</span>
                            </li>
                            <li><a href="${pageContext.request.contextPath}/personal/newview" class="glyphicon glyphicon-tree-deciduous">&nbsp;<span>就诊管理</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-9 col-sm-9 col-md-9" id="righter">
                    <div class="title">
                        <span><img src="${pageContext.request.contextPath}/imgs/weblogo.png" alt="" style="width: 2%">知医治</span>
                    </div>
                    <div id="content">
                        <div style="display:block;" class="tabpage">
                            <h3 class="glyphicon glyphicon-grain">账号安全</h3>
                            <form action="${pageContext.request.contextPath}/personal/safetypasssite" method='post' class='form-horizontal' role='form' onsubmit="return checkSub()">
                            <div class="counts">
                                <div class="texts">
                                    <span>原&nbsp;&nbsp;密&nbsp;&nbsp;码:</span>&nbsp;&nbsp;&nbsp;
                                    <input type="password" name="ordPass" id="ord" onblur="ordPass()">
                                    <span id="ordSpan" style="color: red"></span>
                                </div>
                                <div class="texts">
                                    <span>新&nbsp;&nbsp;密&nbsp;&nbsp;码:</span>&nbsp;&nbsp;&nbsp;
                                    <input type="password" name="newPass" id="new" onblur="newPass()">
                                    <span id="newSpan" style="color: red"></span>
                                </div>
                                <div class="texts">
                                    <span>再次输入:</span>&nbsp;&nbsp;&nbsp;
                                    <input type="password" name="again" id="then" onblur="again()">
                                    <span id="password2Span" style="color: red"></span>
                                </div>
                                <div>
                                    <button type="button" onclick="location.href='${pageContext.request.contextPath}/personal/safetys'" style="color: white">取消修改</button>&nbsp;&nbsp;&nbsp;
                                    <button type="submit" class="alert-api-button alert-btn1" style="color: white">确认修改</button>
                                    <span id="ordPass" style="color: red;">${passerror}</span>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<%@ include file="../nav/foot.jsp"%>

    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../plugins/bootstrap/js/bootstrap.js"></script>
    <!-- 引入alert的js文件 -->
    <script src='../js/alert.js'></script>

    <script>
        //原密码
        function ordPass() {
            return codedata("ord",/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+){6,12}$/);
        }
        //新密码
        function newPass() {
            return codedata("new",/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+){6,12}$/);
            return again();
        }
        //再次输入
        function again() {
            //获取第一次密码
            var pwd1 =document.getElementById("new").value;
            //获取第二次密码
            var pwd2 =document.getElementById("then").value;
            //比较两次密码是否相同
            var span =document.getElementById("password2Span");
            if(pwd2==""||pwd2==null){
                span.innerHTML="确认密码不能为空";
                return false;
            }else if(pwd1==pwd2){
                span.innerHTML="ok";
                return true;
            }else{
                span.innerHTML="两次密码不一致";
                return false;
            }
        }
        //封装
        function codedata(a,reg1){
            //获取用户的用户信息
            var user = document.getElementById(a).value;
            var span = document.getElementById(a+"Span");
            var alt = document.getElementById(a).alt;
            //创建校验规则
            var reg=reg1;
            //校验
            if(user==""|| user==null){
                span.innerHTML=alt+"不能为空";
                return false;
            }else if(reg.test(user)){
                span.innerHTML=alt+"ok";
                return true;
            }else{
                span.innerHTML=alt+"不符合规则";
                return false;
            }
        }
        //提交
        function checkSub(){
            ordPass();
            newPass();
            again();
            return ordPass()&&newPass()&&again();
        }
    </script>
</body>

</html>
